<!-- templates/article/detail.html -->
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:if="${article != null}" th:text="${(article?.title ?: '无标题') + ' - 个人博客'}">文章详情 - 个人博客</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/Article.css">
    <style>
        .article-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1.5rem 0;
            margin-bottom: 2rem;
            height: 120px;
        }
    </style>
</head>
<body>
    <!-- 文章头部 -->
    <header class="article-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <h1 class="display-6" th:text="${article?.title ?: '无标题'}">文章标题</h1>
                    <div class="mt-3">
                        <span th:if="${article?.createTime != null}" th:text="${#temporals.format(article.createTime, 'yyyy-MM-dd HH:mm')}">未知时间</span>
                        <span class="mx-2">•</span>
                        <span>浏览 <span th:text="${article?.viewCount ?: 0}">0</span></span>
                        <span class="mx-2">•</span>
                        <span>点赞 <span th:text="${article?.likeCount ?: 0}">0</span></span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <!-- 文章封面 -->
                <div th:if="${article?.coverImage != null and article.coverImage != ''}" class="text-center mb-4">
                    <img th:src="${article.coverImage}"
                         class="img-fluid rounded"
                         alt="文章封面"
                         style="max-height: 150px;">
                </div>

                <!-- 文章标签和标记 -->
                <div class="mb-4">
                    <span th:if="${article?.flag != null and article.flag != ''}"
                          class="badge bg-primary me-2"
                          th:text="${article.flag}">
                    </span>

                    <span th:if="${article?.tags != null and article.tags != ''}">
                        <span th:each="tag : ${#strings.arraySplit(article.tags, ',')}"
                              class="badge bg-secondary me-1"
                              th:text="${tag}">
                        </span>
                    </span>
                </div>

                <!-- 文章内容 -->
                <article class="article-content">
                    <p th:if="${article?.content != null}" th:utext="${article.content}">文章内容</p>
                    <p th:if="${article?.content == null}">暂无内容</p>
                </article>

                <!-- 文章元信息 -->
                <div class="article-meta">
                    <div class="row text-center">
                        <div class="col-md-3">
                            <div class="fw-bold">浏览量</div>
                            <div th:text="${article?.viewCount ?: 0}">0</div>
                        </div>
                        <div class="col-md-3">
                            <div class="fw-bold">点赞数</div>
                            <div th:text="${article?.likeCount ?: 0}">0</div>
                        </div>
                        <div class="col-md-3">
                            <div class="fw-bold">收藏数</div>
                            <div th:text="${article?.collections ?: 0}">0</div>
                        </div>
                        <div class="col-md-3">
                            <div class="fw-bold">评论数</div>
                            <div th:text="${article?.commentCount ?: 0}">0</div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="text-center mb-5">
                    <button class="btn btn-outline-primary me-2">
                        <i class="far fa-thumbs-up"></i> 点赞
                    </button>
                    <button class="btn btn-outline-success me-2">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                    <button class="btn btn-outline-secondary">
                        <i class="fas fa-share-alt"></i> 分享
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-light mt-5 py-4">
        <div class="container text-center">
            <p class="mb-0">&copy; 2023 个人博客. All rights reserved.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
